<template>
  <view class="alldiv">
    <view class="navdiv">
      <u-navbar
        back-text="返回"
        @leftClick="navigateBack"
        :leftText="internationalization.Expensesettlement.navtitle"
      ></u-navbar>
    </view>
    <!-- 主体区域样式 -->
    <view class="bodydiv">
      <!-- 这个是待支付详情 -->
      <view class="Costbox">
        <!-- 这个待支付详情头部金额区域 -->
        <view class="headerdiv">
          <!-- 待支付标题区域 -->
          <view style="font-size: 14px; color: rgba(56, 56, 56, 1)">{{
            internationalization.Expensesettlement.statetitle
          }}</view>
          <view style="font-size: 10px; color: rgba(153, 153, 153, 1)"
            ><span
              >{{ internationalization.Expensesettlement.sanytime }}：</span
            >
            <span> 00:59:59</span></view
          >
          <view style="color: rgba(56, 56, 56, 1)"
            ><span style="font-size: 12px">￥</span
            ><span style="margin-left: 10px; font-weight: bold; font-size: 24px"
              >12.30</span
            ></view
          >
        </view>
        <!-- 行驶时长和费用区域 -->
        <view class="Travelexpensesdiv">
          <view class="mcdiv">
            <view style="font-size: 10px; color: rgba(153, 153, 153, 1)">{{
              internationalization.Expensesettlement.xstime
            }}</view>
            <view
              style="
                font-size: 16px;
                font-weight: bold;
                color: rgba(56, 56, 56, 1);
              "
              >48min</view
            >
          </view>
          <view class="mcdiv">
            <view style="font-size: 10px; color: rgba(153, 153, 153, 1)">{{
              internationalization.Expensesettlement.xscost
            }}</view>
            <view
              style="
                font-size: 16px;
                font-weight: bold;
                color: rgba(56, 56, 56, 1);
              "
              >10.30</view
            >
          </view>
        </view>
        <!-- 这个支付的号码和一些描述   区域 -->
        <view class="describediv">
          <view class="descdd">
            <span class="s">{{
              internationalization.Expensesettlement.xscnnumber
            }}</span>
            <span class="s1">12234</span>
          </view>
          <view class="descdd">
            <span class="s">{{
              internationalization.Expensesettlement.xsord
            }}</span>
            <span class="s1">12234</span>
          </view>
          <view class="descdd">
            <span class="s">{{
              internationalization.Expensesettlement.stime
            }}</span>
            <span class="s1">16:30:00</span>
          </view>
          <view class="descdd">
            <span class="s">{{
              internationalization.Expensesettlement.etime
            }}</span>
            <span class="s1">23:33:00</span>
          </view>
        </view>
      </view>
      <!-- 支付方式 -->
      <view class="Costboxtwo">
        <u-cell-group>
          <u-cell size="large" isLink>
            <view
              slot="title"
              style="font-size: 12px; color: rgba(51, 51, 51, 1)"
              >{{ internationalization.Expensesettlement.yhj }}</view
            >
            <view
              slot="value"
              style="font-size: 12px; color: rgba(204, 204, 204, 1)"
              >{{ internationalization.Expensesettlement.yhjval }}</view
            >
          </u-cell>
          <u-cell size="large" isLink>
            <view
              slot="title"
              style="font-size: 12px; color: rgba(51, 51, 51, 1)"
              >{{ internationalization.Expensesettlement.zffs }}
            </view>
            <view
              slot="value"
              style="font-size: 12px; color: rgba(204, 204, 204, 1)"
              >{{ internationalization.Expensesettlement.zfval }}</view
            >
          </u-cell>
        </u-cell-group>
      </view>
      <!-- 这个是面包屑 -->
      <view class="Breadcrumbsdiv">
        <view class="bre">
          <span>{{ internationalization.Expensesettlement.xcls }}</span>
        </view>
        <view class="bre">
          <span>{{ internationalization.Expensesettlement.lszd }}</span>
        </view>
        <view class="bre">
          <span>{{ internationalization.Expensesettlement.sfbz }}</span>
        </view>
      </view>
    </view>
    <!-- 合计和固定按钮 -->
    <view class="buttondiv">
      <view class="bucostdiv">
        <span style="font-size: 12px; color: rgba(102, 102, 102, 1)">{{
          internationalization.Expensesettlement.hj
        }}</span>
        <span style="color: rgba(255, 51, 51, 1)"
          ><span style="font-size: 12px">￥</span
          ><span style="margin-left: 10px; font-size: 24px; font-weight: bold"
            >12.30</span
          ></span
        >
      </view>
      <!-- 这个是按钮 -->
      <view class="bucostdivtwo">
        <view style="width: 180px"
          ><u-button
            color="linear-gradient(90deg, rgba(65, 240, 135, 1) 0%, rgba(47, 212, 184, 1) 100%)"
            type="primary"
            @click="MygoPaymentdetails"
            style="width: 100% !important"
            shape="circle"
            :text="internationalization.Expensesettlement.btn"
          ></u-button
        ></view>
      </view>
    </view>
  </view>
</template>
      
<script>
export default {
  data() {
    return {
      internationalization: {},
    };
  },
  onShow: function () {
    this.getlanguagedata();
    console.log("Personalcenter Show");
  },
  onLoad() {
    this.getlanguagedata();
  },
  mounted() {
    this.getlanguagedata();
  },
  methods: {
    getlanguagedata() {
      this.internationalization =
        this.$store.getters["internationalization/getinternationalization"];
    },
    // 返回上一个页面
    navigateBack() {
      uni.navigateBack({
        delta: 1,
        success: () => {
          // 返回成功后的回调函数
        },
        fail: () => {
          // 返回失败后的回调函数
        },
      });
    },
    MygoPaymentdetails() {
      uni.navigateTo({
        url: "/pages/Home/Scancode/Ltinerarydetails",
      });
    },
  },
};
</script>
  
  
  
  <style lang="less" scoped>
.alldiv {
  width: 100vw;
  height: 100vh;
  //   这个是返回
  .navdiv {
    width: 100%;
    height: 10%;
    overflow: hidden;
    z-index: 999999;
    margin-bottom: 10px;
  }
  //   主体样式
  .bodydiv {
    width: 100%;
    height: 70%;
    display: flex;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;
    // 支付方式样式
    .Costboxtwo {
      width: 95%;
      height: auto;
      border-radius: 16px;
      background: #ffffff;
      box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.08);
    }
    // 待支付详情
    .Costbox {
      width: 95%;
      height: auto;
      border-radius: 16px;
      background: #ffffff;
      display: flex;
      margin-bottom: 15px;
      box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.08);
      flex-direction: column;
      align-items: center;

      //   这个待支付详情头部金额区域样式
      .headerdiv {
        width: 100%;
        height: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      //   行驶时长和费用区域
      .Travelexpensesdiv {
        width: 90%;
        height: 65px;
        border-top: 1px;
        border-top: solid rgba(217, 219, 218, 1);
        border-radius: 0px 0px 12.84px 12.84px;
        background: rgba(250, 251, 253, 1);
        display: flex;
        // 行驶时长和费用区域功能列表样式
        .mcdiv {
          width: 50%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
        }
      }
      //   这个支付的号码和一些描述   区域
      .describediv {
        width: 90%;
        height: 130px;
        .descdd {
          width: 100%;
          height: 25%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .s {
            font-size: 12px;
            color: rgba(153, 153, 153, 1);
          }
          .s1 {
            font-size: 14px;
            color: rgba(56, 56, 56, 1);
          }
        }
      }
    }
    // 面包屑样式
    .Breadcrumbsdiv {
      width: 95%;
      height: 15%;
      margin-top: 5px;
      display: flex;
      align-items: center;
      // 这个是面包屑列表样式
      .bre {
        width: 30%;
        height: 50%;
        margin-left: 5px;
        border-radius: 6px;
        background: rgba(47, 212, 184, 1);
        font-size: 12px;
        color: rgba(153, 153, 153, 1);
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  //   合计和固定按钮区域
  .buttondiv {
    width: 100%;
    height: 15%;
    border-radius: 20px 20px 0px 0px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -3px 6px rgba(6, 145, 161, 0.05);
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: center;
    // 支付按钮和合计区域
    .bucostdiv {
      width: 30%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .bucostdivtwo {
      width: 60%;
      height: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
}
</style>